<html xmlns:th="http://www.thymeleaf.org" lang="en" >
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{'/css/bootstrap.min.css'}">
    <link rel="stylesheet" th:href="@{'/css/buttonStyle.css'}">
    <link rel="stylesheet" th:href="@{'/css/homepage.css'}">
    <title>XMUM Parcel System</title>
</head>

<body>
<div class="wrap">

    <div class="half_section" id="left" style="background-color: transparent;">

        <div style="margin: 20% 0% 5% 20%; height:35%"> <!--height of logo to be determined-->
            <img th:src="@{'/images/logo_white.png'}" style="height: 100%; width: 100%; object-fit: contain"/>
        </div>

        <div class="spacing_alignment_box" style="height:7%; margin: 0% 0% 0% 20%;";> <!--height of button to be determined-->
            <div>
                <input type="button" value="Learn More" class="m_info" id="learnMore"> <!--color, background color and margin is unique to each button-->
            </div>
        </div>

    </div>

    <!--right side buttons-->
    <div class="half_section" id="right">
        <div class="spacing_alignment_box button_box">
            <div>
                <input type="button"
                       th:value="${session.get('userId')!= null
                       ? 'UserID: ' + session.get('userId')
                       : 'Login'}"
                       class="menu_button button1 btn btn-primary" id="login">
                <!--color, background color and margin is unique to each button-->
            </div>
        </div>

        <div class="spacing_alignment_box button_box">
            <div>
                <input type="button" class="menu_button button2 btn btn-primary" id="parcelQuery" value="Search">
            </div>
        </div>

        <div class="spacing_alignment_box button_box">
            <div>
                <input type="button" class="menu_button button3 btn btn-primary" id="myParcel" value="My Parcels">
            </div>
        </div>

        <div class="spacing_alignment_box button_box">
            <div>
                <input type="button" class="menu_button button4 btn btn-primary" id="parcelPickUp" value="Parcel Pickups">
            </div>
        </div>

        <div class="spacing_alignment_box button_box">
            <div>
                <input type="button" class="menu_button button5 btn btn-primary" id="parcelPost" value="Mailing parcels">
            </div>
        </div>

    </div>

</div>

<script th:src="@{'/js/jquery-3.5.1.min.js'}"></script>
<script th:inline="javascript">
    $().ready(function (){
        $('#myParcel').click(function () {
            window.location.href = [[@{'/myParcel'}]];
        })
        $('#parcelQuery').click(function (){
            window.location.href = [[@{'/public/parcelQuery'}]];
        })
        $('#parcelPickUp').click(function(){
            window.location.href = [[@{'/parcelPickUp'}]];
        });
        $('#login').click(function(){
            window.location.href = [[@{'/public/login'}]];
        });
        $('#learnMore').click(function () {
            window.location.href = [[@{'/public/learnMore'}]];
        })
        $('#parcelPost').click(function () {
            window.location.href = [[@{'/comingSoon'}]];
        })
    })
</script>
</body>
</html>